<template>
  <div style="background-color: #fff">
    <div>
      <homePage></homePage>
    </div>
    <div class="container">
      <div class="info-wrap">
        <div class="profile-pic">
          <el-avatar :size="200">
            <img v-if="userInfo.portrait" :src="userInfo.portrait" />
            <i v-else class="el-icon-user-solid avatar-uploader-icon"></i>
          </el-avatar>
        </div>
        <div class="text-info-1">
          <div class="text-info-title">个人信息</div>
          <div class="info-row">
            <div class="title">用户名称</div>
            <div class="data">{{ userInfo.username }}</div>
          </div>
          <div class="info-row">
            <div class="title">真实名称</div>
            <div class="data">{{ userInfo.real_name }}</div>
          </div>
          <div class="info-row">
            <div class="title">所在学校、公司</div>
            <div class="data">{{ userInfo.position }}</div>
          </div>
          <div class="info-row">
            <div class="title">个人简介</div>
            <div class="data">{{ userInfo.bio }}</div>
          </div>
        </div>
        <div class="text-info-2">
          <div class="text-info-title">联系方式</div>
          <div class="info-row">
            <div class="title">微信号</div>
            <div class="data">{{ userInfo.vxId }}</div>
          </div>
          <div class="info-row">
            <div class="title">QQ</div>
            <div class="data">{{ userInfo.qqId }}</div>
          </div>
          <div class="info-row">
            <div class="title">微博</div>
            <div class="data">{{ userInfo.wbId }}</div>
          </div>
        </div>
        <el-divider></el-divider>
        <div v-if="userInfo.scholarList.length > 0" class="page-title">
          学者门户
        </div>
        <div v-else style="color: #999; text-align: center">
          没有更多信息啦！
        </div>
        <el-divider v-if="userInfo.scholarList.length > 0"></el-divider>
        <div v-if="userInfo.scholarList.length > 0" class="table-wrap">
          <el-table
            ref="multipleTable"
            :data="scholar"
            tooltip-effect="dark"
            style="width: 100%"
            :cell-style="{ cursor: 'pointer' }"
            :header-cell-style="{ 'text-align': 'center' }"
            @row-click="to_scholar_profile"
          >
            <el-table-column prop="name" label="学者名" width="220">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="orgs" label="所在单位" width="300">
              <template slot-scope="scope">
                <div v-if="scope.row.orgs">
                  {{ scope.row.orgs[0] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="h_index"
              label="H指数"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.h_index }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="n_pubs"
              label="成果数"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.n_pubs }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="n_citation"
              label="被引量"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.n_citation }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="325" align="center">
              <template slot-scope="scope">
                <el-tag v-for="item in scope.row.tags" :key="item.id" size="mini">
                  {{item.t}}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import homePage from "../components/homePage.vue";
export default {
  name: "UserProfile",
  data() {
    return {
      isLogin: false,
      isAdmin: true,
      userInfo: {},
      scholar: [],
    };
  },
  components: {
    homePage,
  },
  mounted() {
    this.getInfo();
  },
  created() {},
  methods: {
    to_scholar_profile(row) {
      this.$router.push({ path: `/scholarprofile/${row.id}` });
    },
    async getInfo() {
      await this.$axios({
        method: "get",
        url: "/api/getUserPage?userId=" + this.$route.params.uid,
      })
        .then((res) => {
          console.log(res.data);
          this.userInfo = res.data.data;
          this.userInfo.portrait='http://120.46.205.87'+this.userInfo.portrait
        })
        .catch((err) => {
          console.log(err);
        });
      if (this.userInfo.scholarList.length == 0) return;
      for (let i = 0; i < this.userInfo.scholarList.length; i++) {
        await this.$axios({
          method: "get",
          url:
            "/api/getScholarPage?scholarId=" + this.userInfo.scholarList[i].id,
        })
          .then((res) => {
            console.log(res.data);
            this.scholar.push(res.data.post.data[0]);
            console.log(this.scholar);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style scoped>
.el-table {
  font-size: 16px;
  margin: 0 0 50px 0;
}
.table-wrap {
  /* padding: 10px 150px 0 150px; */
  letter-spacing: 1px;
}
.page-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.data {
  display: inline-block;
  width: 370px;
  padding: 10px 5px;
  box-sizing: border-box;
}
.profile-pic {
  display: inline-block;
  vertical-align: top;
  margin: 20px 0 0 20px;
}
.title {
  display: inline-block;
  width: 130px;
  padding: 10px 0;
  vertical-align: top;
  color: #888888;
}
.info-row {
  margin: 2px 0;
  width: 500px;
  /* outline: 1px red solid; */
}
.text-info-2 .title {
  width: 80px;
}
.text-info-2 {
  display: inline-block;
  width: 300px;
  word-wrap: break-word;
  vertical-align: top;
  /* outline: 1px red solid; */
}
.text-info-1 {
  display: inline-block;
  width: 500px;
  word-wrap: break-word;
  vertical-align: top;
  /* outline: 1px red solid; */
}
.text-info-title {
  /* margin: 0 0 40px 0; */
  font-size: 18px;
  font-weight: 600;
  color: #3d3daf;
}
.profile-pic {
  margin: 0 50px;
  vertical-align: top;
}
.info-wrap {
  padding: 20px 40px;
  /* width: 1000px; */
  /* box-shadow: #dedede 0px 0px 20px; */
}
.container {
  padding: 0 150px;
  letter-spacing: 1px;
}
</style>